<template>
  <van-cell class="article-item">
    <!-- 自定义插槽title就是标题 -->
    <div slot="title" class="title van-multi-ellipsis--l3">{{ article.title }}</div>
    <!-- 自定义插槽label就是在标题下方 -->
    <div slot="label">
      <div class="cover-wrap" v-if="article.cover.type === 3">
        <div class="cover-wrap-item"
          v-for="(img,index) in article.cover.images"
          :key="index"
          >
            <van-image
            class="cover-item"
            fit="cover"
            :src="img"
            />
        </div>
      </div>
      <div class="label-wrap">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }} 评论</span>
        <span>{{ article.pubdate }}</span>
      </div>
    </div>
    <!-- 自定义插槽 default 在内容右侧,整个内容就会被分为两半 -->
    <!-- <div slot="default">hello</div> -->
    <!-- :src要灵活变的话就要 band 绑定 -->
    <van-image
      v-if="article.cover.type === 1"
      class="right-cover"
      fit="cover"
      :src="article.cover.images[0]"
/>
  </van-cell>
</template>

<script>

export default {
  name: 'ArticleItem',
  props: {
    article:{ // 父组件定义的标识符
      type: Object, // 父组件传的值的类型
      required: true, // 是否必传
    }
  },
}
</script>
<style>
  .article-item .title {
    font-size: 16px;
    color: #3a3a3a;
  }
  .article-item .van-cell__value {
    flex: unset;
    width: 116px;
    height: 73px;
    margin-left: 12px;
  }
  .article-item .right-cover {
    width: 116px;
    height: 73px;
  }
  .cover-wrap {
    display: flex;
    flex-wrap: nowrap;
  }
  .cover-wrap .cover-wrap-item {
    flex: 1;
    height: 73px;
  }
  .cover-wrap-item .cover-item {
    width: 100%;
    height: 73px;
  }
</style>